<template>
	<div class="chart-two-scrollbar">
		<p class="chart-title">{{ $t('message.mainStationScreenNews.pagePowerElectTitle') }}</p>

		<div ref="powerElectMatch" class="powerElectMatch"></div>
	</div>
</template>

<script setup lang="ts" name="chartIndex">
import * as echarts from 'echarts';
import { onMounted, ref, onUnmounted, onActivated } from 'vue';

// 定义响应式变量
const isHighResolution = ref(false); // 是否高分辨率
const powerElectMatch = ref<HTMLDivElement | null>(null); // 电量对比图表容器

// 初始化功率电量对比图表
const initPowerElectMatch = () => {
	if (!powerElectMatch.value) return;

	// 根据分辨率设置高度
	powerElectMatch.value.style.height = isHighResolution.value ? '20rem' : '9.5rem';

	// 图表配置
	const option = {
		grid: {
			containLabel: true,
			top: isHighResolution.value ? 30 : 25,
			bottom: isHighResolution.value ? 15 : 5,
			left: isHighResolution.value ? 20 : 10,
			right: isHighResolution.value ? 20 : 10,
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999',
				},
			},
		},
		xAxis: {
			type: 'category',
			data: ['04', '05', '06', '07', '08', '09', '10'],
			axisTick: { show: false },
			axisLabel: { color: '#EBEBEB' },
			axisLine: { lineStyle: { color: '#3498db' } },
		},
		yAxis: [
			{
				type: 'value',
				name: '万kWh',
				nameTextStyle: { color: '#EBEBEB' },
				axisLabel: { formatter: '{value}', color: '#EBEBEB' },
				splitLine: {
					lineStyle: {
						color: '#2d4a7a',
						type: 'dashed',
						opacity: 0.6,
					},
				},
			},
			{
				type: 'value',
				name: 'MW',
				nameTextStyle: { color: '#EBEBEB' },
				axisLabel: { formatter: '{value}', color: '#EBEBEB' },
				splitLine: {
					lineStyle: {
						color: '#2d4a7a',
						type: 'dashed',
						opacity: 0.6,
					},
				},
			},
		],
		series: [
			{
				name: '当前功率',
				type: 'bar',
				barWidth: '45%',
				tooltip: {
					valueFormatter: (value: any) => `${value} MW`,
				},
				data: [0.9, 0.3, 0.5, 0.4, 0.1, 0.9, 0.2],
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: '#83bff6' },
							{ offset: 0.5, color: '#188df0' },
							{ offset: 1, color: '#188df0' },
						],
					},
					borderRadius: [10, 10, 6, 6],
				},
			},
			{
				name: '小时发电量',
				type: 'line',
				yAxisIndex: 1,
				smooth: true,
				tooltip: {
					valueFormatter: (value: any) => `${value} 万kWh`,
				},
				data: [0.05, 0.01, 0, 0.09, 0.02, 0.06, 0.07],
				itemStyle: {
					color: '#E00074',
				},
				lineStyle: {
					width: 2,
					type: 'solid',
				},
			},
		],
	};

	// 初始化图表
	const chart = echarts.init(powerElectMatch.value);
	chart.setOption(option);

	// 窗口大小变化时重新调整图表大小
	window.addEventListener('resize', () => chart.resize());
};

// 组件挂载时初始化
onMounted(() => {
	isHighResolution.value = window.innerWidth >= 1600;
	initPowerElectMatch();
});

// 组件卸载时移除事件监听
onUnmounted(() => {
	window.removeEventListener('resize', () => {});
});

// 组件激活时重新初始化（用于keep-alive缓存）
onActivated(() => {
	initPowerElectMatch();
});
</script>

<style scoped lang="scss">
.chart-two-scrollbar {
	border-radius: 0.5rem;
	background-color: #11214e;
	border: 1px solid #5aabfb;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-title {
	color: #48a0f8;
	font-size: 1.2rem;
	font-weight: bolder;
	display: inline-flex;
	align-items: center;
	letter-spacing: 2px;
	text-indent: 1em;
	line-height: 2.1em;
}

.powerElectMatch {
	width: 100%;
}
</style>
